<template>
	<div>
		<!--表格操作项目-->
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<th>用户</th>
					<th>提现金额</th>
					<th>提现方式</th>
					<th>状态</th>
					<th>时间</th>
					<th>操作</th>
				</tr>
			</tbody>
			<tbody>
				<tr v-for="(item, index) in allResourcesData" :key="index">
					<td>{{ item.user.nickname }}</td>
					<td>{{ item.money }}</td>
					<td>{{ item.pay_type }}</td>
					<td>
						<span v-show="item.status == 0" style="color: #ff6600">待审核</span>
						<span v-show="item.status == 1" style="color: #339900">已打款</span>
						<span v-show="item.status == 2" class="cursor-p" style="color: #ff0000" :title="item.fail">未通过</span>
					</td>
					<td>{{ item.create_time }}</td>
					<td>
						<span v-if="item.status == 0" class="m-r-10">
							<a-button size="small" danger @click="Reflect(item, index)">提现审核</a-button>
						</span>
						<a-button type="primary" size="small" @click="infoModal(item)">详情</a-button>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- 提现审核 -->
		<a-drawer title="提现审核" placement="right" :closable="false" width="650" :visible="visible" @close="onClose">
			<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
				<a-form-item label="审核状态">
					<a-radio-group v-model="queryParams.status" @change="onChange">
						<a-radio value="2">未通过</a-radio>
						<a-radio value="1">通过</a-radio>
					</a-radio-group>
					<!--审核未通过理由-->
					<div style="margin-top: 20px" v-show="textareas">
						<span style="color: #cc3300">未通过理由:</span>
						<textarea v-model="queryParams.fail" cols="60" rows="5"></textarea>
					</div>
				</a-form-item>

				<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
					<a-button type="primary" @click="sureSubmit">确定</a-button>
					<a-button style="margin-left: 10px" @click="visible = false">取消</a-button>
				</a-form-item>
			</a-form>
		</a-drawer>
		
		<!-- 账号详情 -->
		<a-drawer title="详情" placement="right" :closable="false" width="650" :visible="infoVisible" @close="infoVisible=false">
			<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
				<a-form-item label="审核状态">
					<a-tag v-if="infoData.status==2" color="red">未通过</a-tag>
					<a-tag v-else-if="infoData.status==1" color="green">已打款</a-tag>
					<a-tag v-else-if="infoData.status==0" color="blue">待审核</a-tag>
					<a-tag v-else color="#f50">未知状态</a-tag>
				</a-form-item>
				<a-form-item label="提现方式">
					{{infoData.pay_type}}
				</a-form-item>
				<a-form-item label="提现金额">
					{{infoData.money}}
				</a-form-item>
				<a-form-item label="收款账号">
					{{infoData.account_name}}
				</a-form-item>
				<a-form-item label="姓名/昵称">
					{{infoData.account_holder}}
				</a-form-item>
				<a-form-item v-if="infoData.type=='bank'" label="开户行">
					{{infoData.opening_bank}}
				</a-form-item>
				<a-form-item label="申请时间">
					{{infoData.create_time}}
				</a-form-item>
				<a-form-item v-if="infoData.audit_time" label="审核时间">
					{{infoData.audit_time}}
				</a-form-item>
				<a-form-item v-if="infoData.status==2" label="失败原因">
					{{infoData.fail}}
				</a-form-item>
				<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
					<a-button type="primary" @click="infoVisible=false">关 闭</a-button>
				</a-form-item>
			</a-form>
		</a-drawer>
		<!-- 分页 -->
		<div class="padding-t-20">
			<a-pagination
				:pageSize="formCount.pageSize"
				:current="formCount.page"
				:total="formCount.count"
				@change="clickPage"
				:pageSizeOptions="pageSizeOptions"
				show-size-changer
				@showSizeChange="onShowSizeChange"
				show-quick-jumper
			/>
		</div>
	</div>
</template>

<script>
import apiUser from '../api/user.js';
export default {
	data() {
		return {
			// 分页
			pageSizeOptions: ['20', '50', '100', '150'],
			formCount: {
				count: '',
				page: 1,
				pageSize: 20
			},
			// 提现审核
			visible: false,
			
			// 审核是否通过
			textareas: false,
			// 所有数据
			allResourcesData: [],
			queryParams: {
				fail: '',
				user_id: '',
				id: '',
				status: ''
			},
			
			infoVisible: false,
			infoData:''
		};
	},
	mounted() {
		this.allResources();
	},
	methods: {
		allResources() {
			apiUser.getUserTixian(this.formCount.page, this.formCount.pageSize).then((res) => {
				this.allResourcesData = res.result.data;
				this.formCount.count = res.result.count;
			});
		},
		Reflect(item, index) {
			console.log(item);
			this.queryParams.id = item.id;
			this.queryParams.user_id = item.user_id;
			this.visible = true;
		},
		onClose() {
			this.visible = false;
		},
		// 审核是否通过
		onChange(e) {
			this.queryParams.status = e.target.value;
			if (e.target.value == 2) {
				this.textareas = true;
			} else {
				this.textareas = false;
			}
		},
		// 确定审核
		sureSubmit() {
			if (this.queryParams.status == 1) {
				this.queryParams.fail = '';
			}
			apiUser.tixianAudit(this.queryParams).then((res) => {
				if (res.status == 1) {
					this.$message.success(res.message);
					this.visible = false;
					this.allResources();
				}
			});
		},
		// 分页
		clickPage(e) {
			this.formCount.page = e;
			this.allResources();
		},
		onShowSizeChange(current, pageSize) {
			this.formCount.pageSize = pageSize;
			this.formCount.page = 1;
			this.allResources();
		},

		// 详情弹窗
		infoModal(item) {
			console.log(item)
			this.infoData = item
			this.infoVisible = true
			
			
		}
	}
};
</script>

<style></style>